<!-- 视频 -->
<template>
	<view class="upload" style="margin-left: 20rpx;">
		<view v-show="addVideo" class=" u-f u-f-ajc u-f-column video" @click="test">
			<view class="iconfont icon-video">

			</view>
			<view class="text" style="width: 170rpx;height: 170rpx;">
				<image src="https://sanfuzhide.oss-cn-hangzhou.aliyuncs.com/my/tianjiaimgsss.png" mode=""></image>
			</view>
		</view>
		<view v-show="showVideo" style="position: relative;width: 170rpx;height: 170rpx;">
			<video :src="src" style="video"></video>
			<view class="icon close-img" @click="DelImg">
				<u-icon name="close"></u-icon>
			</view>
			<view v-show="showretry" class="taost" @click="retry">
				点击重试
			</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		name: "video",
		props: {
			video: String,
		},
		data() {
			return {
				src: '',
				showVideo: false,
				addVideo: true,
				showretry: false,
				returnImage: null,
				fileList:[]
			};
		},
		mounted() {
			if (this.video) {
				this.showVideo = true
				this.addVideo = false
				this.src = this.video
			}
		},
		methods: {
			//点击上传视频
			test: function() {
				var self = this;
				uni.chooseVideo({
					count: 1,
					sourceType: ['camera', 'album'],
					success: (res)=> {
						if (res.size > 20971520) {
							self.$refs.uToast.show({
								title: '视频大小已超出20兆 请重新选择!',
								type: 'warning',
								duration: 3000
							})
							return
						}
						console.log("选择视频成功", res)
						self.showVideo = true
						self.addVideo = false
						self.src = res.tempFilePath;
						let urll = res.tempFilePath
						const uploadTask = uni.uploadFile({
							url: 'https://shanfu.51fnt.com/attentionList/uploadPicture', //接口地址
							filePath: res.tempFilePath,
							name: 'path',
							header: {
								Authorization: uni.getStorageSync('openId')
							},
							success: (res) => {
								let data = JSON.parse(res.data)
								self.returnImage = data.data.picture[0].url
								self.fileList.push(data.data.picture[0].url)
								self.$emit('list', self.fileList)
							},
							fail: (e) => {
								console.log(e, this)
								self.showretry = true
								self.$refs.uToast.show({
									title: '上传失败，请重试'
								})
							}
						});
						uploadTask.onProgressUpdate(res => {
							uni.showToast({
								icon: 'success',
								title: '上传进度' + res.progress
							})
						})
						
					}
				});
			},
			//右上角删除视频
			DelImg() {
				this.src = '',
					this.showVideo = false,
					this.addVideo = true
			},
			//上传失败重试按钮
			retry() {
				uni.uploadFile({
					url: 'https://shanfu.51fnt.com/attentionList/uploadPicture', //接口地址
					filePath: this.src,
					name: 'path',
					// formData: {
					//     'user': 'test'
					// },
					header: {
						Authorization: uni.getStorageSync('openId')
					},
					success: (uploadFileRes) => {

						console.log('1张', uploadFileRes);
						let bold = JSON.parse(uploadFileRes.data)
						console.log(bold)
						self.returnImage = bold.data
						self.$emit('revideo', self.returnImage)
					},
					fail: (e) => {
						console.log(e, this)
						this.showretry = true
						this.$refs.uToast.show({
							title: '上传失败，请重试'
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.upload {
		color: #aaaaaa;
		font-size: 18rpx;
		margin-left: 0 !important;

		.video {

			

			.text {
				width: 100%;
				height: 30rpx;
				line-height: 50rpx;
			}
		}

		video {
			width: 170rpx;
			height: 170rpx;
			border-radius: 10rpx;
			overflow: hidden;
		}

		.close-img {
			width: 44rpx;
			height: 44rpx;
			position: absolute;
			top: 0rpx;
			right: 0rpx;
			background-color: #FA3534;
			color: #FFFFFF;
			border-radius: 50%;
			text-align: center;
			line-height: 46rpx;
			font-size: 22rpx;
		}

		.taost {
			width: 114rpx;
			color: #ffffff;
			background-color: #fa3534;
			font-size: 20rpx;
			padding: 4px 0;
			text-align: center;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			z-index: 9;
			line-height: 1;
			-webkit-border-bottom-left-radius: 10rpx;
			-webkit-border-bottom-right-radius: 10rpx;
		}

	}
</style>
